<template>
  <div class="home-city van-hairline--bottom">
    <div class="city-content">
      <div class="content-header van-hairline--bottom">
        <router-link class="header-area" to="/city">
          <div>{{ this.city }}</div>
        </router-link>

        <div @click="getMapCity" class="header-located-area">
          <i class="icon iconfont">&#xe697;</i>
          <span>当前位置</span>
        </div>
      </div>
      <div class="date-container van-hairline--bottom">
        <div class="time date-left" @click="handleShowStartTime">
          {{ startTime | timeFormatting }}
        </div>
        <div class="date">{{ timeQuantum | TimestampFormat }}</div>
        <div class="time date-right" @click="handleShowEndTime">
          {{ endTime | timeFormatting }}
        </div>
      </div>
      <div class="search-site">
        <van-field
          clearable
          class="site-content"
          v-model="cityMapInfo"
          placeholder="输入位置"
        />
      </div>
      <div class="search-bottom">
        <van-button class="search-bottom-item" type="primary" size="large"
          >搜索位置</van-button
        >
      </div>
    </div>
    <!-- 开始日期弹出层 -->
    <show-start-time
      @handleShowStart="handleGetDateStart"
      :showStart="showStart"
    ></show-start-time>
    <!-- 结束日期弹出层 -->
    <show-end-time
      @handleShowEnd="handleGetDateEnd"
      :showEnd="showEnd"
      :endTime="startDate"
    ></show-end-time>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ShowStartTime from "./components/ShowStartTime";
import showEndTime from "./components/ShowEndTime";
import { location } from "@/assets/javascript/map.js";
export default {
  name: "HomeCity",
  components: {
    ShowStartTime,
    showEndTime
  },
  data() {
    return {
      showStart: false,
      showEnd: false,
      startDate: null,
      startTime: "入住时间",
      endTime: "离开时间",
      cityMapInfo: "",
      position: {}
    };
  },
  computed: {
    ...mapState(["city"]),
    ...mapState(["cityInfo"]),
    timeQuantum() {
      if (
        typeof this.startTime != "string" &&
        typeof this.endTime != "string"
      ) {
        return this.endTime - this.startTime;
      } else {
        return "";
      }
    }
  },
  methods: {
    handleShowStartTime() {
      this.showStart = !this.showStart;
    },
    handleShowEndTime() {
      this.showEnd = !this.showEnd;
      console.log(this.showEnd);
    },
    handleGetDateStart(time) {
      // this.showStart = !this.showEnd;
      this.startDate = time;
      this.startTime = time;
      console.log(time);
    },
    handleGetDateEnd(time) {
      // this.showEnd = !this.showEnd;
      this.endTime = time;
    },
    getMapCity() {
      // 获取定位信息精确到市
      let geolocation = location.initMap("container"); //定位
      geolocation.getCityInfo((status, result) => {
        console.log(status);
        console.log(result);
        this.$store.commit("changeCity", result.city);
      });
      this.$store.commit(
        "changeCityInfo",
        "广东省深圳市龙岗区平湖街道富安大道海源城"
      );
      this.cityMapInfo = this.cityInfo;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.home-city {
  // border: 1px solid skyblue;
  width: 100%;
  height: 5.8rem;
  // position: relative;
  // margin-top: 0rem;
  font-size: 0.4263rem;
  color: #333;
  padding-bottom: 0.34rem;

  .city-content {
    padding: 0.4rem;

    .content-header {
      height: 0.853rem;
      margin: $homeCity;
      display: flex;

      .header-area {
        flex: 1;
        color: #333;
        font-size: 0.426rem;
        height: 0.586rem;
        line-height: 0.586rem;
        padding-bottom: 0.26rem;
      }

      .header-located-area {
        line-height: 0.586rem;
        font-size: 0.32rem;

        .icon {
          vertical-align: middle;
          font-size: 0.426rem;
        }
      }
    }

    .date-container {
      font-size: 0.426rem;
      height: 2rem;
      margin: $homeCity;
      display: table;

      .time {
        line-height: 0.8rem;
        width: 4rem;
        box-sizing: border-box;
        padding-right: 1.5rem;
        display: table-cell;
        vertical-align: middle;
      }

      .date {
        width: 1.2rem;
        font-size: 0.32rem;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

      .date-right {
        padding-left: 1.5rem;
        padding-right: 0;
        text-align: right;
      }
    }

    .search-site {
      margin: $homeCity;
      height: 1.173rem;
      line-height: 1.173rem;

      .site-content {
        font-size: 0.2rem;

        >>> .van-field__control {
          color: #666;
          ellipsis();
        }
      }
    }

    .search-bottom {
      margin: $homeCity;

      .search-bottom-item {
        border-radius: 25px;
      }
    }
  }
}
</style>
